<template>
	<view class="page-container">
		<view class="form-container">
			<view class="title">用户登录</view>
			<!-- 头像区域 -->
			<view class="avatar-container">
				<image class="avatar" :src="avatarUrl" @click="chooseAvatar"></image>
				<text class="avatar-tip">点击更换头像</text>
			</view>
			<view class="input-group">
				<input type="text" v-model="username" placeholder="请输入用户名" class="input" auto-focus />
			</view>
			<view class="input-group">
				<input type="password" v-model="password" placeholder="请输入密码" class="input" />
			</view>
			<button class="btn login-btn" @click="handleLogin()">登录</button>
			<view class="link-container">
				<text>还没有账号？</text>
				<text class="link" @click="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '', 
				password: '', 
				avatarUrl: '/static/default-avatar.png'
			}
		},
		methods: {
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0];
						uni.setStorageSync('AvatarUrl', this.avatarUrl);
					},
					fail: (err) => {
						console.error('选择头像失败', err);
						uni.showToast({title: '选择头像失败', icon: 'none'});
					}
				});
			},
			handleLogin() {
				if (!this.username) {
					return uni.showToast({title: '请输入用户名', icon: 'none'});
				}
				if (!this.password) {
					return uni.showToast({title: '请输入密码', icon: 'none'});
				}

				uni.setStorageSync('Account', this.username);
				if (!uni.getStorageSync('AvatarUrl')) {
					uni.setStorageSync('AvatarUrl', this.avatarUrl);
				}

				uni.switchTab({
					url: "/pages/Custom/NewsListPage/NewsListPage",
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({title: '跳转失败，请检查页面路径', icon: 'none'});
					}
				});
			},
			goToRegister() {
				uni.navigateTo({url: '/pages/components/register/register'});
			}
		}
	};
</script>

<style scoped>
.page-container {
	padding: 30rpx;
	min-height: 100vh;
	background: linear-gradient(180deg, #ffe6f0 0%, #ffccd5 100%);
}
.form-container {
	width: 90%;
	margin: 0 auto;
	background: #fff;
	padding: 40rpx;
	border-radius: 12rpx;
}
.title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40rpx;
	color: #ffb5bc;
}

/* 头像样式 */
.avatar-container {
	text-align: center;
	margin-bottom: 30rpx;
}
.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 2rpx solid #eee;
	/* 头像和文字增加间距，确保文字在正下方 */
	margin-bottom: 8rpx;
}
.avatar-tip {
	/* 字体缩小到20rpx（可根据需求再调小） */
	font-size: 20rpx;
	color: #999;
	/* 确保文字独占一行，稳定在头像正下方 */
	display: block;
}

/* 输入框样式 */
.input-group {
	margin-bottom: 20rpx;
}
.input {
	width: 100%;
	padding: 20rpx;
	border: 1rpx solid #eee;
	border-radius: 8rpx;
	font-size: 28rpx;
}

/* 按钮样式 */
.login-btn {
	width: 100%;
	padding: 20rpx;
	background: #ffb5bc;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
}

/* 注册链接样式 */
.link-container {
	text-align: center;
	margin-top: 30rpx;
	font-size: 26rpx;
	color: #666;
}
.link {
	color: #ffb5bc;
	margin-left: 10rpx;
}
</style>